<template>
  <section>
    <p v-if="seen">现在你看我了 {{seen}}</p>
    <p>
      <a v-bind:href="url">A or B {{url}}</a>
      <br>
      <button v-on:click="onSomething">做一些事情</button>
    </p>
    <p>
      <a v-bind:[attributeName]="url">动态参数：A or B {{url}}</a>
      <br>
      <button v-on:[eventName]="onSomething">动态参数：做一些事情</button>
    </p>
    <p>
      <!-- 这会触发一个编译警告 -->
      <!-- <a v-bind:['foo' + bar]="value"> ... </a> -->
    </p>
    <p>
      <!-- 在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]` -->
      <a v-bind:[someAttr]="value">{{value}} {{someAttr}}</a>
    </p>
    <form v-on:submit.prevent="onSubmit">
      <input type="hidden" name="id" v-bind:value="id">
      <button>提交</button>
    </form>
  </section>
</template>

<script>
export default {
  name: "Directive",
  data() {
    return {
      seen: true,
      url: "/a",
      attributeName: "title",
      eventName: "mouseenter",
      someAttr: "SomeAttr-Lower-Case",
      value: 33,
      id: 456123
    };
  },
  methods: {
    onSomething() {
      this.url = this.url == "/a" ? "/b" : "/a";
      this.seen = !this.seen;
    },
    onSubmit() {}
  }
};
</script>